import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 10,
    prevCount: 10,
  };

  // todo getDerivedStateFromProps必须要加static, 需要有state
  // todo 根据props的值得到一个新的state(可以有一个state，让这个state的值一直保持和某个props一致)
  // todo 里面必须要返回一个对象或者null
  static getDerivedStateFromProps(nextProps, nextState) {
    console.log("getDerivedStateFromProps");
    // return null;
    // return {
    //   count: 20,
    // };
    // return {
    //   count: nextProps.num,
    // };

    // todo 1. nextProps.num 20, nextState.prevCount 10 -> count 20 prevCount 20
    // todo 2. nextProps.num 40, nextState.prevCount 20 -> count 40 prevCount 40
    // todo 3. nextProps.num 40, nextState.prevCount 40 -> null
    if (nextProps.num === nextState.prevCount) {
      return null;
    } else {
      return {
        count: nextProps.num,
        prevCount: nextProps.num,
      };
    }
  }
  render() {
    return <div>child组件 - {this.state.count}</div>;
  }

  // componentDidMount() {
  //   setTimeout(() => {
  //     this.setState({
  //       count: 80,
  //     });
  //   }, 4000);
  // }

  // todo 在更新之前得到一个快照
  // todo 必须和componentDidUpdate一起使用
  // todo 可以得到dom更新前的ui信息
  // todo 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 123;
  }

  // todo 传递给dom更新以后
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", snapshot);
  }
}

export default Child;
